<template>
  <div class="container">
    <c-r-m-head
      ref="crmTableHead"
      :crm-type="crmType"
      :main-title="'新增协议'"
      @handle="handleHandle"
      @on-search="crmSearch"
      placeholder="请选择"
    >
    </c-r-m-head>
    <div class="table-container">
      <el-table
        v-loading="loading"
        id="crm-table"
        :row-height="40"
        :data="list"
        border
        :cell-class-name="cellClassName"
        :height="tableHeight"
        :row-key="`${crmType}Id`"
        class="n-table--border"
        highlight-current-row
        style="width: 100%"
        @row-click="handleRowClick"
        @sort-change="sortChange"
      >
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="fieldFormatter"
          show-overflow-tooltip
          align="center"
        >
          <template slot-scope="scope">
            <template v-if="item.prop == 'fun'">
              <span class="can-visit--underline" @click="updateRow(scope.row)"
                >编辑</span
              >
              <span class="can-visit--underline" @click="downloadRow(scope.row)"
                >预览</span
              >
              <span class="can-visit--underline" @click="deleteRow(scope.row)"
                >删除</span
              >
            </template>
            <template v-if="item.prop == 'status'">
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                @change="statusChange(scope.row)"
              />
            </template>
            <template v-else>
              {{ fieldFormatter(scope.row, scope.column) }}
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          :pager-count="5"
          class="p-bar"
          background
          layout="prev, pager, next, sizes, total, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <create
      v-if="isCreate"
      :show="isCreate"
      :action="createActionInfo"
      @save-success="handleHandle"
      @close="hideView"
    >
    </create>
  </div>
</template>

<script>
import CRMHead from "../components/CRMHead.vue";

import Create from "./Create.vue";
import Table from "../mixin/Table";

import {
  getTemplatePreviewUrl,
  delTemplate,
  getTemplateInfo,
  upStateTemplate
} from "@/api/admin/agreement";
export default {
  name: "templateConfig",
  components: {
    CRMHead,
    Create
  },
  mixins: [Table],
  data() {
    return {
      crmType: "templateConfig",
      isCreate: false, // 创建
      createActionInfo: { type: "update", data: null }
    };
  },
  mounted() {
    /** 控制table的高度 */
    window.onresize = () => {
      this.tableHeight = document.documentElement.clientHeight - 270;
    };
  },
  methods: {
    handleHandle(data) {
      this.isCreate = false;
      this.getList();
    },
    /** 搜索 */
    crmSearch(options) {
      this.currentPage = 1;
      this.pageSize = 15;
      this.getList(options);
    },

    statusChange(row) {
      // console.log(row.status);
      upStateTemplate({
        status: row.status,
        templateId: row.templateId
      }).then(res => {
        if (res && res.code === 0) {
          this.$message.success("修改成功");
          this.getList();
        } else {
          this.$message.success(res.msg);
        }
      });
    },

    // 编辑
    updateRow(row) {
      getTemplateInfo({
        templateId: row.templateId
      }).then(res => {
        if (res && res.code === 0) {
          this.createActionInfo.data = res.data;
          this.isCreate = true;
        }
      });
    },
    // 下载
    downloadRow(row) {
      getTemplatePreviewUrl({
        templateId: row.templateId
      }).then(res => {
        if (res && res.code === 0) {
          window.open(res.data.result, "_blank");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 删除
    deleteRow(row) {
      this.$confirm("此操作将永久删除该模板, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delTemplate({
            templateId: row.templateId
          }).then(res => {
            if (res && res.code === 0) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getList();
            }
          });
        })
        .catch(() => {});
    },

    hideView() {
      this.isCreate = false;
    },

    /**
     * 通过回调控制class
     */
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === "templateName") {
        return "can-visit--col";
      } else {
        return "";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.table-container {
  margin-top: 16px;
}
#crm-table {
  padding: 16px;
}
</style>
